<style lang="less" scoped>
.icon-search {
  margin-left: 0.2rem;
  padding-left:0.2rem;
  border-left:1px solid #ccc
}
.transfer {
  p {
    margin:0 0 0.2rem 0;
    border: 1px solid rgba(0,0,0,0.1);
    padding: .2rem;
    border-radius: 5px;
    &:last-of-type {
      margin:0;
    }
    input {
      width:5rem;
    }
  }
}
</style>

<template>
  <div class="contain">
    <div class="transMask" v-if="showMask"></div>
    <app-head :show="showstate" :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">业务单号：{{data.BBillNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>制单时间</i><label class="flex1">{{data.CreateTime | time}}</label></p>
        <p class="displayflex"><i>取货地址</i><label class="flex1">{{data.DepartureCity | city}}{{data.DepartureDistrict | district}}{{data.DepartureAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class="flex1">{{data.PickContacts}} {{data.PickContactsTel}}</label></p>
        <p class="displayflex"><i>订单件数</i><label class="flex1">{{data.Pkgs}}件</label></p>
        <p class="displayflex"><i>提货件数</i><label class="flex1">{{data.ConPKGS}}件</label></p>
      </div>
    </div>

    <div class="car-bbinfo-card mb30 transfer">
      <div class="bbno lineb">交接信息</div>
      <div class="bbmain">
        <p><input type="text" placeholder="输入或选择物流公司" v-model="carrierText" v-on:blur="setCarrier"/>
          <label>
            <i class="iconfont icon-search" v-on:click="showCarrier = true"></i>
          </label>
        </p>
        <p><input type="text" placeholder="输入物流单号" />
          <label></label>
        </p>
        <p><input type="text" placeholder="输入车牌号"/>
          <label></label>
        </p>
      </div>
    </div>

    <div class="car-bbinfo-card">
      <div class="bbmain mb30">
        <x-textarea v-model="Memo" :placeholder="'备注'" :max="200" autosize style="color:#888; font-size:16px;"></x-textarea>
      </div>
    </div>

    <div class="displayflex form-btn">
      <div class="flex1" v-on:click="submit()">确认中转</div>
    </div>

    <uploader :title="'上传中转凭据'" :img-list="imgList" :max="max"></uploader>
    <popup-picker :show.sync="showCarrier" show-name :show-cell="false" title="TEST" :data="carriers" v-model="selectedCarrier" ref="carrierPicker"></popup-picker>
  </div>
</template>

<script>
import appHead from "@/components/core/header/app_headbar.vue";
import uploader from '@/components/share/imageUploader/imageUploader.vue';
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    appHead,
    uploader,
  },
  data() {
    return {
      data: {},
      Memo:'',
      carrierText:'',
      selectedCarrier:[],

      carriers:[],
      imgList:[],
      max:9,
      showCarrier:false,
      showMask:false,
      manualCarriers:[],
    };
  },
  watch:{
    selectedCarrier:{
      handler(n,o){
        this.carrierText = this.$refs.carrierPicker.getNameValues();
      },
      deep:true
    }
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  mounted() {

  },
  created() {
    this.getCarriers();
    this.getData();
  },
  methods:{
    setCarrier(e){
      let text = e.target.value;
      let item = {
        value: (this.carriers.length + 1).toString(),
        name: text
      },
      selItem = [(this.carriers.length + 1).toString()];

      this.manualCarriers.push(item);
      this.carriers.splice(0,1,this.manualCarriers);
      this.selectedCarrier = selItem;
    },
    getCarriers(){
      let query = {
        CorpGuid : this.userinfo.CorpGuid,
      };
      this.Ajax.post("SearchCorpCarrier", query).then(resp => {
        if(resp.IsSuccess){
          let carriers = [];
          resp.Datas.forEach((x) => {
            if(x.Guid !== this.userinfo.BelongGuid){
              let item = {
                name: x.ChineseName,
                value: x.Guid,
              }
              carriers.push(item);
            }
          })
          this.carriers.push(carriers);
        } else {
          this.Toast({
            message: resp.ErrorMessage
          });
        }
      });
    },
    getData() {
      let query = {
        Guid: this.$route.query.Guid,
        RowNo: this.$route.query.RowNo,
      };
      this.Ajax.post("GetTaskorderDetailEX", query).then(resp => {
        if (resp.IsSuccess) {
          this.data = resp.Data;
          this.totaldetialcount = this.data.Tratvehicleex.length;
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    submit(){
      if(this.selectedCarrier.length === 0){
        this.Toast({message: '请设置物流公司'});
        return false;
      }
      let _this = this;
      this.$vux.confirm.show({
        content: '确认进行中转？',
        onCancel () {
          return false;
        },
        onConfirm () {
          let imgList = _this.$sortImage(_this.imgList);

          let query ={
            BillNo: _this.data.BBillNo,
            Guid: _this.data.Guid,
            Memo: _this.Memo,
            PRContactsTel: _this.userinfo.MobileTel1,
            RPName: _this.carrierText,
            Rpguid: _this.selectedCarrier[0],
            imgList: imgList,
            rowNo: _this.data.RowNo,
          }
          _this.showMask = true;
          _this.Ajax.post("TransferOrder", query).then(resp => {
            if (resp.IsSuccess) {
              _this.Toast({
                message: '操作成功',
                duration: 1000,
              });
              setTimeout(() => { _this.$router.go(-1) }, 1000);
            } else {
              _this.Toast({
                message: resp.ErrorMessage,
                duration: 1000,
              });
              setTimeout(() => { _this.$router.go(-1) }, 1000);
            }
          }).catch((e) => {
            _this.showMask = false;
            _this.Toast({
              message: "出现错误，请刷新重试"
            });
          });
        }
      })
    }
  }
}
</script>
